<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<c:set var="ctxPath" value="${pageContext.request.contextPath}" />
    
<!DOCTYPE html>
<meta content="text/html;charset=UTF-8">
<script src="${ctxPath}/js/jquery-1.11.1.min.js"></script>
<script>
//{1} 你只需要在这里设置你要提交什么样数据, 就 OK 了。
var ids = ["username", "password", "nickName",
           "position", "age", "sex"];
           
function getParas(){
	var obj = {}; 
	for(var i=0; i<ids.length; i++){
		//{ps} 根据每一个 id 去取页面上表单项目的值 。
		var val = $("#"+ ids[i]).val();
		//{ps} 设置一个键值对到对象中。
		obj[ ids[i] ] = val; 
	}
	return obj;
}

function doSubmit(){
	//{1} 获取表单参数。
	var _para = getParas();
	var _url = '${ctxPath}/User/addUser';
	$.ajax(
		{
			url:_url,
			type:'post',
			dataType:'json',
			data:_para,
			success:function( data ){
				if( data.result!='success' ){
					$("#msgBox").text( data.cause );	
				}				
			}
		}			
	);
}
</script>
<style>
#msgBox{
	font-size:18px; color:red;
	font-weight:bold;
}
</style>
<h1>添加用户</h1>
<form action="" method="post">
	用户名:
	<input type="text" id="username" name="username"/><br/>
	密码:
	<input type="text" id="password" name="password"/> <br/>
	昵称:
	<input type="text" id="nickName" name="nickName"/><br/>
	职位:
	<input type="text" id="position" name="position"/> <br/>
	年龄:
	<input type="text" id="age" name="age"/><br/>
	性别:
	<input type="text" id="sex" name="sex"/> <br/>
	<div id="msgBox"></div>
	<input type="button" value="表单提交" 
		onclick="doSubmit();"/>
</form>



